<template>
  <MainPage>
    <template #header>
      <CommonHeader title="课程" background="#ffffff" show-center></CommonHeader>
    </template>
    <div class="course-page__body">
      <aside class="course-menu-wrap">
        <transition name="fade">
          <CourseMenu
            v-show="!homeStore.expandSideBox"
            :menu-list="courseMenu"
            @click="handleClickMenu"
          />
        </transition>
        <transition name="fade">
          <ChatList v-show="homeStore.expandSideBox" />
        </transition>
      </aside>
      <section :class="['course-content-wrap', homeStore.expandSideBox && 'collapse']">
        <CourseHeader :title="homeStore.contentTitle" :height="60" border="0" />
        <div class="course-content-container">
          <a-spin :spinning="contentLoading">
            <template v-if="currentComponent">
              <component
                :is="currentComponent.component"
                v-bind="currentComponent.props"
              ></component>
            </template>
            <template v-else>
              <Empty tips="暂无内容" />
            </template>
          </a-spin>
        </div>
      </section>
      <section
        :class="[
          'course-note-wrap',
          homeStore.showSideBox && 'show',
          homeStore.expandSideBox && 'expand',
        ]"
      >
        <div class="collapse-handler" @click="homeStore.toggleSideBox">
          <CollapseHandler class="handler-button" />
          <RightOutlined v-if="homeStore.showSideBox" class="arrow-icon" />
          <LeftOutlined v-else class="arrow-icon" />
        </div>
        <Chat />
      </section>
    </div>
  </MainPage>
</template>
<script setup lang="ts">
import { queryCourseContent, queryCourseExamPaper, queryCourseMenu } from '@/api/course';
import CommonHeader from '@/components/CommonHeader/index.vue';
import MainPage from '@/layouts/MainPage.vue';
import { useChatStore } from '@/stores/chat';
import { useHomeStore } from '@/stores/home';
import { computed, onMounted, reactive, ref, shallowRef } from 'vue';
import CourseExamPaper from './components/CourseExamPaper.vue';
import CourseMenu from './components/CourseMenu.vue';
import CourseQuestion from './components/CourseQuestion.vue';

import ChatList from '@/components/Chat/ChatList.vue';
import Chat from '@/components/Chat/index.vue';
import Empty from '@/components/Empty/index.vue';
import CollapseHandler from '@/icons/course/collapse-handler.svg?skipsvgo';
import type { ICourseMenu, TCourseContentComponent } from '@/interface/course';
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
import type { MenuProps } from 'ant-design-vue';
import CourseArticle from './components/CourseArticle.vue';
import CourseHeader from './components/CourseHeader.vue';

import { COURSE_MENU_TYPE } from '@/enums/course';
import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface';

const courseMenu = ref<ICourseMenu[]>([]);
const contentLoading = ref<boolean>(false);

const contentComponents = reactive<TCourseContentComponent>({
  3: {
    component: shallowRef(CourseArticle),
    props: {},
  },
  4: {
    component: shallowRef(CourseExamPaper),
    props: {},
  },
  5: {
    component: shallowRef(CourseQuestion),
    props: {},
  },
});

const currentContent = ref<COURSE_MENU_TYPE>();

const currentComponent = computed(() => {
  return currentContent.value ? contentComponents[currentContent.value as COURSE_MENU_TYPE] : null;
});

const homeStore = useHomeStore();
const chatStore = useChatStore();

onMounted(() => {
  initPage();
});

const initMenu = async () => {
  try {
    const res = await queryCourseMenu();
    console.log('🚀 ~ initMenu ~ res:', res);
    courseMenu.value = res;
  } catch (e) {
    console.log('🚀 ~ initMenu ~ e:', e);
  }
};

const initPage = () => {
  initMenu();
};

const handleClickMenu: MenuProps['onClick'] = async menuInfo => {
  console.log('🚀 ~ menuInfo:', menuInfo);
  const { item } = menuInfo;
  const menuItem = item.originItemValue as ICourseMenu;
  homeStore.setContentTitle(menuItem?.label as string);
  if (contentComponents[menuItem.type as COURSE_MENU_TYPE]) {
    contentLoading.value = true;
    homeStore.setShowSideBox(false);
    if (+menuItem.type === COURSE_MENU_TYPE.ARTICLE) {
    }
    if (+menuItem.type === COURSE_MENU_TYPE.EXAM) {
      fetchCourseExamPaper(menuInfo);
    } else if (+menuItem.type === COURSE_MENU_TYPE.ARTICLE) {
      fetchCourseContent(menuInfo);
    }
  }
};

const fetchCourseExamPaper = async (menuInfo: MenuInfo) => {
  try {
    const res = await queryCourseExamPaper({ subject_id: menuInfo.item.id! });
    console.log('🚀 ~ fetchCourseQuestions ~ res:', res);
    const menuItem = menuInfo.item.originItemValue as ICourseMenu;
    currentContent.value = menuItem.type as COURSE_MENU_TYPE;
    contentComponents[currentContent.value].props = { questions: res };
    contentLoading.value = false;
  } catch (e) {
    console.log('🚀 ~ fetchCourseQuestions ~ e:', e);
    contentLoading.value = false;
  }
};
const fetchCourseContent = async (menuInfo: MenuInfo) => {
  try {
    const res = await queryCourseContent({ subject_id: menuInfo.item.id! });
    const menuItem = menuInfo.item.originItemValue as ICourseMenu;
    currentContent.value = menuItem.type as COURSE_MENU_TYPE;
    contentComponents[currentContent.value].props = res;
    contentLoading.value = false;
  } catch (e) {
    console.log('🚀 ~ fetchCourseContent ~ e:', e);
    contentLoading.value = false;
  }
};
</script>
<style lang="less" scoped>
.fade-enter-from,
.fade-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}
.fade-enter-active {
  transition-delay: 0.3s;
}

.course-page__body {
  height: 100%;
  display: flex;
}

.course-menu-wrap {
  position: relative;
  width: 20%;
  flex-shrink: 0;
}

.course-content-wrap {
  flex: 1;
  display: flex;
  flex-flow: column nowrap;
  padding: 0 24px 24px;
  overflow: hidden;
  transition: all 0.3s;

  &.collapse {
    flex: 0;
    padding-right: 0;
    transform: scale(0);
    transform-origin: center left;
    opacity: 0;
  }

  .course-content-container {
    flex: 1;
    width: 100%;
    overflow: hidden;

    .ant-spin-nested-loading {
      height: 100%;

      :deep(.ant-spin-container) {
        height: 100%;
      }
    }
  }
}

.course-note-wrap {
  width: 30%;
  border-left: 1px solid #0000000e;
  flex-shrink: 0;
  margin-right: -30%;
  transition: all 0.3s;
  position: relative;

  &.show {
    margin-right: 0;
  }

  &.expand {
    margin-right: 0;
    flex: 1;
  }

  .collapse-handler {
    width: 16px;
    height: 84px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-100%, -50%);
    cursor: pointer;

    .handler-button {
      height: 100%;
      width: 100%;
      transform: rotate(180deg);
    }

    .arrow-icon {
      position: absolute;
      width: 14px;
      height: 14px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      color: #020514b3;
    }
  }
}
</style>
